<template>
  <view>
    <web-view :src="webviewSrc" style="width: 100%; height: 100vh;" @message="handleWebviewMessage" @onPostMessage="handleWebviewPostMessage" @load="handleWebviewLoad" @error="handleWebviewError"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webviewSrc: '', // 用于存储 web-view 加载的 URL
    };
  },
  onLoad(options) {
    console.log('alipay-webview onLoad, options:', options);
    
    // 从页面参数中获取后端支付页面URL
    if (options.payUrl) {
      try {
          const decodedPayUrl = decodeURIComponent(options.payUrl);
          console.log('接收到并解码后的支付URL:', decodedPayUrl);
          this.webviewSrc = decodedPayUrl;
          console.log('web-view src 已设置为:', this.webviewSrc);
      } catch (e) {
          console.error('解码支付URL失败:', e);
           uni.showToast({
             title: '支付链接处理失败',
             icon: 'none'
           });
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
      }
     
    } else {
      console.error('未接收到支付URL参数');
      // 如果没有接收到URL，给出提示或返回
      uni.showToast({
        title: '缺少支付链接',
        icon: 'none'
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  },
  methods: {
      // 可以根据需要处理 web-view 发来的消息
      handleWebviewMessage(event) {
          console.log('接收到 web-view message:', event);
      },
       handleWebviewPostMessage(event) {
          console.log('接收到 web-view onPostMessage:', event);
      },
      // web-view 加载成功事件
      handleWebviewLoad(event) {
          console.log('web-view 加载成功:', event);
      },
      // web-view 加载失败事件
      handleWebviewError(event) {
          console.error('web-view 加载失败:', event);
           uni.showToast({
             title: '支付页面加载失败',
             icon: 'none'
           });
      }
    // 可以在这里添加对 web-view 事件的监听，例如加载失败、URL变化等
    // 例如，监听 web-view 的 urlChange 事件来处理支付完成后的跳转
    // handleUrlChange(e) {
    //   console.log('Webview URL changed:', e.detail.src);
    //   // 判断是否跳转到 return_url 或 notify_url，然后处理支付结果或跳转到结果页
    //   if (e.detail.src.includes('your_backend_return_url')) {
    //     // 处理支付成功后的逻辑
    //     uni.redirectTo({
    //       url: '/pages/sign/payment-result?status=success' // 假设有一个支付结果页面
    //     });
    //   } else if (e.detail.src.includes('your_backend_notify_url')) {
    //      // 注意：notify_url 是支付宝异步通知后端，通常不需要前端处理这里的跳转
    //     //  这里可以添加一个简单的延时跳转，避免用户长时间停留在 notify_url 页面
    //      setTimeout(() => {
    //           uni.redirectTo({
    //               url: '/pages/sign/payment-result?status=processing' // 跳转到处理中或查询结果页
    //           });
    //      }, 2000); // 延时2秒
    //   }
    // }
  }
};
</script>

<style>
/* 可以添加一些样式来确保 web-view 占满整个页面 */
/* page { height: 100%; overflow: hidden; } */
/* web-view { width: 100%; height: 100%; } */
</style> 